/**
 * Created by wangjz on 2018/12/05.
 */
import React, { Component } from 'react';
import { Input, Layout, Button, Table, Modal, message, Divider, Form, Select, Tag } from 'antd';
import '../less/index.less';
import { inject, observer } from 'mobx-react';
import ModuleDrawer from './ModuleDrawer';
import RoleDialog from './RoleDialog';
import OrgSelect from '../../components/OrgSelect';
import { PlusOutlined, SettingOutlined } from '@ant-design/icons';

const { Content, Header } = Layout;

@inject('store')
@observer
class Root extends Component {
  state = { visible: false };
  selectRef = React.createRef();
  onAddRole = () => {
    let orgId = this.selectRef.current.getFieldValue('orgId');
    this.props.store.showRoleDialog({ orgId: orgId });
  };

  onDeleteRole = record => {
    let that = this;
    Modal.confirm({
      title: '确认删除这个角色吗？',
      async onOk() {
        await that.props.store.deleteRole(record);
        message.success('删除角色成功！');
      },
    });
  };

  onSearchRole = name => {
    let orgId = this.selectRef.current.getFieldValue('orgId');
    this.props.store.searchRole(orgId, name);
  };

  onOrgOnload = data => {
    this.selectRef.current.setFieldsValue({ orgId: data.row.id });
    this.props.store.orgOnload(data.row);
    this.setState({ visible: data.visible });
  };

  onOrgSelect = value => {
    this.props.store.selectOrg(value);
    this.selectRef.current.setFieldsValue({ orgId: value });
  };

  render() {
    const { store } = this.props;
    const columns = [{
      title: '角色名称[ID]', dataIndex: 'name', key: 'name', width: 250, render: function(text, record) {
        return <span>{record.isGlobal ? <SettingOutlined/> : ''} {text}[{record.id}]</span>;
      },
    }, { title: '角色描述', dataIndex: 'remark', key: 'remark' },
      {
        title: '全局适用',
        dataIndex: 'isGlobal',
        key: 'isGlobal',
        width: 100,
        align: 'center',
        render: function(text, record) {
          if (record.isGlobal) {
            return <Tag color={'#108ee9'}>适用</Tag>;
          } else {
            return <Tag color={'#87d068'}>不适用</Tag>;
          }
        },
      }, {
        title: '当前状态',
        dataIndex: 'status',
        key: 'status',
        width: 80,
        align: 'center',
        render: function(text, record) {
          if (record.status) {
            return <Tag color={'#2db7f5'}>启用</Tag>;
          } else {
            return <Tag color={'black'}>停用</Tag>;
          }
        },
      }, {
        title: '操作', width: 200, align: 'center', render: function(text, record) {
          let disabled = record.isFixed ? 'disabled' : null;
          if (record.isGlobal && !this.state.visible) {
            disabled = 'disabled';
          }
          return (<span>
            <a disabled={disabled} onClick={() => store.showRoleDialog(record)}>修改</a>
            <Divider type="vertical"/>
            <a disabled={disabled} onClick={() => this.onDeleteRole(record)}>删除</a>
            <Divider type="vertical"/>
            <a onClick={() => store.editRoleModule(record, disabled)}>授权</a>
          </span>);
        }.bind(this),
      }];

    return <Layout className='layout'>
      <Header className='header'>
        <Button type='primary' icon={<PlusOutlined/>} onClick={() => this.onAddRole()}>新增</Button>
        <Form style={{ float: 'right' }} ref={this.selectRef} layout='inline'>
          <Form.Item name='orgId' label='所属机构：' noStyle={this.state.visible ? false : true}>
            <OrgSelect style={{ width: 200 }} onSelect={key => this.onOrgSelect(key)}
                       onload={data => this.onOrgOnload(data)}/>
          </Form.Item>

          <Form.Item>
            <Input.Search placeholder="角色名称" style={{ width: 200 }} onSearch={(name) => this.onSearchRole(name)}/>
          </Form.Item>
        </Form>
      </Header>
      <Content className='content'>
        <Table rowKey="id" size={'middle'} loading={store.roleListData.loading}
               dataSource={store.roleListData.dataSource} columns={columns}
               pagination={false}></Table>
        <RoleDialog visible={this.state.visible}/>
        <ModuleDrawer/>
      </Content>
    </Layout>;
  }
}

export default Root;
